<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div v-if="commonAttr.isOtherBtnTrigger" class="wb-imgs" :style="styles">
        <ul class="swiper-list">
          <li v-for="(item_, index) in lists" :key="index" class="swiper-li">
            <img :src="item_.url" />
          </li>
        </ul>
      </div>
      <div v-else class="wb-imgs" :style="styles" ref="swiper">
        <div class="swiper swiper-container" ref="scrollSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" :class="{'swiper-no-swiping': isNoSwiping}" v-for="(item_, index) in lists" :key="index" :style="{height: item.conStyles.height}">
              <a v-if="isH5Edit" :href="getLink(item_)" class="wid-hei-inherit" rel="noopener noreferrer">
                <img :src="item_.url">
              </a>
              <a v-else :href="getLink(item_)" class="wid-hei-inherit" rel="noopener noreferrer">
                <img :data-src="item_.url" class="swiper-lazy">
                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
              </a>
            </div>
          </div>
          <div @click.stop v-if="item.commonAttr.paginationType == PAGINATION_TYPE[1].value" :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[2].value">
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[3].value">
            <div @click.stop :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
        </div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { carousel } from "@/components/js/carousel"
import '@/assets/css/carousel.scss'

export default {
  name: 'WbImgs',
  mixins: [utils, commonUtils, carousel],
  components: {
    InjectTemplate,
  },
  created(){
  },
  setup () {
    return {
      jumpUrl_: "img_",
    };
  },
};
</script>
<style lang="scss">
.wb-imgs, .swiper-list{
  width: inherit;
  height: inherit;

  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  li{
    position: absolute;
    top: 0;
    left: 0;
  }
  .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right{
    background-image: none;
  }
}
</style>
